import React, { useMemo } from 'react';
import './index.css';

interface Iprops {
  width?: number | string;
  height?: number | string;
  outsideColor?: string;
  insideColor?: string;
  duration?: number;
  children?: React.ReactChildren;
}

export default ({
  width = 300,
  height = 300,
  outsideColor = '#3be6cb',
  insideColor = '#32bcfe',
  duration = 2,
  children,
}: Iprops) => {
  const outSideColorAnimation = useMemo(() => {
    return `${outsideColor};${insideColor};${outsideColor}`;
  }, []);

  const inSideColorAnimation = useMemo(() => {
    return `${insideColor};${outsideColor};${insideColor}`;
  }, []);

  return (
    <div className="double-loading">
      <svg
        width={width}
        height={height}
        viewBox="0 0 50 50"
        preserveAspectRatio="xMidYMid meet"
      >
        {/*
                stroke-dasharry = 2pi*r/4 = 2 * 3.1415926 * 22 / 4
              */}
        <circle
          cx={25}
          cy={25}
          r={22}
          fill="none"
          strokeWidth={3}
          stroke={outsideColor}
          strokeDasharray={34}
          strokeLinecap="round"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            // from={'0 25 25'}
            // to={'360 25 25'}
            values="0 25 25;360 25 25"
            dur={duration}
            repeatCount={'indefinite'}
          />
          <animate
            attributeName="stroke"
            values={outSideColorAnimation}
            dur="2"
            repeatCount="indefinite"
          />
        </circle>
        <circle
          cx={25}
          cy={25}
          r={12}
          fill="none"
          strokeWidth={3}
          strokeDasharray={19}
          strokeLinecap="round"
          stroke={insideColor}
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            // from={'360 25 25'}
            // to={'0 25 25'}
            values="360 25 25;0 25 25"
            dur={duration * 2}
            repeatCount={'indefinite'}
          />
          <animate
            attributeName="stroke"
            values={inSideColorAnimation}
            dur={2}
            repeatCount="indefinite"
          />
        </circle>
      </svg>
      <div style={{ textAlign: 'center' }}>{children}</div>
    </div>
  );
};
